import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ApplyInfo from './ApplyInfo';
import GoodsInfo from './GoodsInfo';
import OptRecord from './OptRecord';
import RefundInfo from './RefundInfo';
import { history } from 'umi';
import { getShopOrderDetail, getAfterSaleDetail, getApplyInfo } from '@/services/shop/api';
import { showMsg } from '@/utils/utils';
import './style.less';
import BreadcrumbDept from '@/components/BreadcrumbDept';

interface DetailProps {
  location?: any;
}

const Refund: React.FC<DetailProps> = (props) => {
  const { location } = props;
  const { query } = location;
  const { order_id, apply_id } = query;
  const [detail, setDetail] = useState<SHOPAPI.ShopOrder>({} as SHOPAPI.ShopOrder)
  const [goodsList, setGoodsList] = useState<any>([])
  const [applyInfo, setApplyInfo] = useState<any>({})
  const optRecordRef = useRef();

  // 获得申请单信息
  const fetchApplyInfo = async () => {
    try {
      const data = await getApplyInfo(apply_id)
      setApplyInfo(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }

  // 订单详情
  const fetchOrderDetail = async () => {
    try {
      const data = await getShopOrderDetail(order_id)
      setDetail(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }

  // 售后商品列表
  const fetchAfterSaleDetail = async () => {
    try {
      const data = await getAfterSaleDetail(apply_id)
      setGoodsList(data)
    } catch (error) {
      showMsg(error?.data?.errmsg)
    }
  }


  useEffect(() => {
    if (order_id) {
      init();
    }
  }, [order_id])

  const init = () => {
    fetchApplyInfo();
    fetchOrderDetail()
    fetchAfterSaleDetail()
    optRecordRef.current?.reload();
  }

  return (
    <PageContainer title="售后单详情" extra={[
      <BreadcrumbDept />
     ]} breadcrumb={{}} onBack={() => history.goBack()}>
      <ApplyInfo applyInfo={applyInfo} apply_id={apply_id} title="1. 申请单信息" onRefresh={init} />
      {applyInfo.way === '1' && <RefundInfo applyInfo={applyInfo} apply_id={apply_id} title="2. 退货物流信息" />}
      <GoodsInfo type={0} applyInfo={applyInfo} goodsList={goodsList} title={`${applyInfo.way === '1' ? '3' : '2'}. 订单商品信息`} />
      <OptRecord ref={optRecordRef} apply_id={apply_id} title="3. 操作记录"/>
    </PageContainer>
  );
};
export default Refund;
